<template>
    <div>
        <div class="tital">
            <h2>修改</h2>
            <button>刷新</button>
        </div>
        <div class="datalist">
            <div class="datalistTital">
                <div>订单状态：{{ stateJudge(this.aggregate.status) }}</div>
            </div>
            <div class="DataStyle">
                <div>订单信息</div>
                <ul>
                    <li><span>订单编号：</span>{{ aggregate.aggregateId }}</li>
                    <li><span>订单状态：</span>{{ stateJudge(this.aggregate.status) }}</li>
                    <li><span>支付方式：</span>{{ aggregate.payType == '1' ? 'App支付' : '网页支付' }}</li>
                    <li><span>用户账号：</span>{{ aggregate.userId }}</li>
                    <li><span>提交时间：</span>{{ aggregate.createTime }}</li>
                    <li><span>订单来源：</span>{{ aggregate.source }}</li>
                </ul>
            </div>
            <div class="DataStyle">
                <div>收货人信息</div>
                <ul>
                    <li><span>用户名：</span><el-input v-model="orderUser.contacts" placeholder="请输入用户名"></el-input></li>
                    <li><span>联系方式：</span><el-input v-model="orderUser.phone" placeholder="请输入联系方式"></el-input></li>
                    <li><span>邮政编码：</span><el-input v-model="orderUser.postCode" placeholder="请输入邮政编码"></el-input></li>
                    <li class="liwidth"><span>收货地址：</span><el-input class="inputw" v-model="orderUser.fullAddress"
                            placeholder="请输入收货地址"></el-input></li>
                </ul>
            </div>

            <div class="DataStyle ">
                <div>商品信息</div>
                <div class="goodsData" v-for="item in orderProds" :value="item.orderId">
                    <div class="goodsImg"><span>商品图片：</span><img :src="item.pic" alt=""></div>
                    <ul class="ulData">
                        <li><span>商品名称：</span>{{ item.prodName }}</li>
                        <li><span>商品单价：</span>{{ item.price }}</li>
                        <li><span>商品属性：</span>


                            <el-select v-model="item.kinds" placeholder="请选择颜色" class="shuxing"
                                @change="changeSelect(item.skuId)">
                                <el-option v-for="e in classifyOneList" :key="e.skuId" :label="e.kinds" :value="e.skuId">
                                </el-option>
                            </el-select>

                            <el-select v-model="item.size" placeholder="请选择尺码" class="shuxing">
                                <el-option v-for="e in classifyTowList" :key="e.skuId" :label="e.size" :value="e.skuId">
                                </el-option>
                            </el-select>


                        </li>
                        <li><span>商品数量：</span>{{ item.number }}</li>
                        <li><span>买家备注：</span><el-input v-model="item.remarks" placeholder="请输入买家备注"></el-input>
                        </li>
                        <li><span>小计：</span>{{ item.countMonkey }}</li>
                    </ul>
                </div>

            </div>
            <div class="DataStyle">
                <div>费用合计（单位：元）</div>
                <ul>
                    <li><span>商品合计：</span>{{ totalMonkey.prodMonkey }}</li>
                    <li><span>运费：</span>{{ totalMonkey.dvyMonkey }}</li>
                    <li><span>优惠金额：</span>{{ totalMonkey.reduceAmount }}</li>
                    <li><span>订单总额：</span>{{ totalMonkey.prodMonkey }}</li>
                    <li><span>实付金额：</span>{{ totalMonkey.countMonkey }}</li>

                </ul>
            </div>


            <div class="btnOrder">
                <el-button @click="modify" type="success" color="#1cb09a">确认修改</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
    name: 'ordereditdetail',
    data() {
        return {
            sku: [],
            classifyOneList: [],//1
            classifyTowList: [],//2

            aggregate: {
                aggregateId: '',
                status: '',
                payType: '',
                userId: '',
                createTime: '',
                source: ''
            },
            orderUser: {
                contacts: "",
                phone: "",
                postCode: "",
                fullAddress: ""
            },
            orderProds: [
                {
                    prodName: "",
                    pic: "",
                    price: 0.00,
                    attribute: "",
                    kinds: "",
                    size: "",
                    number: 1,
                    remarks: "",
                    countMonkey: "0.00",
                    orderId: "",
                    prodId: ''
                }
            ],
            totalMonkey: {
                prodMonkey: "",
                dvyMonkey: "",
                reduceAmount: "",
                countMonkey: ""
            },
            dvyFlowId: "",

        }
    },
    methods: {
        ...mapActions('order', ['getOrderDetailFun', 'getSkuByIdFun', 'oderUpdateFun']),

        //获取初始数据
        getListDetail() {
            let id = this.$route.query.aggregateId;
            // console.log("id", id);
            return this.getOrderDetailFun(id).then((res) => {
                this.aggregate = res.data.aggregate;
                this.orderUser = res.data.orderUser;
                this.orderProds = res.data.orderProds;
                this.totalMonkey = res.data.totalMonkey;
                this.dvyFlowId = res.data.dvyFlowId;
            })


        },
        //库存
        getsku() {
            let id;
            // console.log("this.orderProds", this.orderProds);
            this.orderProds.forEach(item => {
                id = item.prodId;
            })
            console.log(id);
            this.getSkuByIdFun(id).then((res) => {
                this.sku = res.data;
                // console.log("this.sku", this.sku);
                this.skuhuafen();

            });

        },
        // chuanzhio(orderId) {
        //     console.log("orderId", orderId);
        // },
        // //获取修改订单的两个id
        // chuanzhis(skuId) {
        //     console.log("skuId", skuId);
        // },
        //修改
        modify() {
            let skus = [];
            let skusObj = {};
            skusObj["orderId"] = this.orderProds[0].orderId;
            skusObj["skuId"] = this.sku[1].skuId;
            skus.push(skusObj);
            let aggregateId = this.aggregate.aggregateId;
            let userName = this.orderUser.contacts;
            let phone = this.orderUser.phone;
            let postCode = this.orderUser.postCode;
            let fullAddress = this.orderUser.fullAddress;

            this.oderUpdateFun({
                skus, userName, phone, postCode, fullAddress, aggregateId
            }).then(res => {
                console.log(res);
                this.getListDetail();
                this.$message.success('操作成功')
            })
        },
        //sku划分
        skuhuafen() {
            this.sku.forEach(item => {
                let obj = {};
                let obj1 = {};
                obj.skuId = item.skuId;
                obj.kinds = item.kinds;
                obj1.skuId = item.skuId;
                obj1.size = item.size;
                this.classifyOneList.push(obj);
                this.classifyTowList.push(obj1);
                // console.log("classifyOneList", this.classifyOneList,);
                // console.log("classifyTowList", this.classifyTowList);
            })
        },
        //查询所有一级分类
        //获取筛选分类
        //点击一级显示二级
        changeSelect(value) {
            for (var i = 0; i < this.classifyOneList.length; i++) {
                var oneClassfy = this.classifyOneList[i];
                if (value == oneClassfy.skuId) {
                    this.classifyTowList = oneClassfy.children;
                    this.orderProds.size = "";
                }
            }
        },


        //状态判断
        stateJudge(ZT) {
            const map = {
                1: '待付款',
                2: '待发货',
                3: '待收货',
                4: '待评价',
                5: '已完成',
                6: '已关闭',
            }
            return map[ZT]
        }




    },
    created() {
        this.getListDetail().then(() => {
            this.getsku()

        });


    },
    mounted() {


    },
}
</script>
<style scoped>
.tital {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
}

.tital button {
    background-color: #1CB09A;
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    color: #fff;
    margin-right: 40px;
}

.tital h2 {
    width: 100px;
    height: 26px;
    font-size: 18px;
    font-weight: 400;
    border-left: 6px solid #1CB09A;
    padding-left: 10px;
    margin-left: 18px;
}

.datalist {
    width: 95%;
    margin: 30px auto;
    font-size: 14px;

}

.datalistTital {
    height: 50px;
    background-color: rgba(64, 158, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 18px;
    margin-bottom: 30px;

}

.DataStyle {
    width: 99%;
    margin: auto;
    margin-bottom: 30px;
    border: 3px solid #E6E8F0;
    border-radius: 10px;
    box-shadow: rgb(231, 231, 231) 5px 5px 10px 1px;
}

ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.DataStyle>div:nth-of-type(1) {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #E6E8F0;
    background-color: rgba(178, 201, 224, 0.5);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    line-height: 40px;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
    font-weight: 500;
}

.DataStyle ul {
    padding: 10px 40px;
}

.DataStyle ul li {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 380px;
}



.goodsData {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6E8F0;
}

.goodsImg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 560px !important;
    padding-left: 40px;
}

.goodsImg img {
    width: auto;
    margin-left: 10px;
    height: 100px;
}

.ulData {
    padding-left: 170px !important;
}

.logistics {
    margin-left: 40px;
}

.btnOrder {
    width: 360px;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-bottom: 30px;
}

.el-button--success {
    background-color: #1CB09A;
}

.el-input {
    position: relative;
    font-size: 14px;
    width: 224px;
    padding-left: 10px;
}

.liwidth {
    width: 800px !important;
    display: flex;
    justify-content: left;
    align-items: center;
}

.inputw {
    width: 90%;
}


.shuxing {
    width: 76px;
    margin-right: 5px;
    margin-left: 10px;
}
</style>
